<template>
  <div class="commoent_page">
    <!-- 头部 标题 收缩  -->
    <div class="head_title">
      <!-- 左边下缩 -->
      <span @click="closeWindow">
        <svg viewBox="0 -40 100 200" style="height: 5rem">
          <line
            x1="20"
            y1="30"
            x2="50"
            y2="60"
            style="stroke: black; stroke-width: 3"
          ></line>
          <line
            x1="50"
            y1="60"
            x2="80"
            y2="30"
            style="stroke: black; stroke-width: 3"
          ></line>
        </svg>
      </span>

      <!-- 标题 -->
      <div style="flex-grow: 1; color: black; padding: 1rem">评论({{ total }})</div>
      <!-- 右边分享 -->
      <div>
        <svg viewBox="0 -40 100 200" style="height: 4rem; margin-top: 2vw">
          <circle cx="20" cy="45" r="10" stroke="black" stroke-width="3" fill="none" />
          <line
            x1="60"
            y1="20"
            x2="30"
            y2="35"
            style="stroke: black; stroke-width: 3"
          ></line>
          <circle cx="72" cy="15" r="10" stroke="black" stroke-width="2" fill="none" />
          <line
            x1="30"
            y1="55"
            x2="60"
            y2="70"
            style="stroke: black; stroke-width: 3"
          ></line>
          <circle cx="72" cy="75" r="10" stroke="black" stroke-width="2" fill="none" />
        </svg>
      </div>
    </div>

    <!--歌曲照片  头像  -->
    <div>
      <div class="sing_img">
        <!-- 歌曲照片 -->
        <div class="sing_cover">
          <img :src="imgUrl" />
        </div>
        <!-- 歌曲名 - 歌手 -->
        <div style="margin-left: 1rem">
          <span style="font-size: 1rem">{{ title }} </span>
          <span style="font-size: 0.8rem; color: #605d5d"> -{{ singer_name }}</span>
        </div>
      </div>

      <!-- 分割线 -->
      <hr class="cut_off_rule" />
    </div>

    <!-- 评论区 -->
    <div>
      <van-tabs v-model="active" :sticky="true" offset-top="0" line-width="0">
        <van-tab title="评论区" disabled> </van-tab>
        <van-tab title="" disabled> </van-tab>
        <van-tab title="" disabled> </van-tab>
        <van-tab title="" disabled> </van-tab>
        <van-tab title="" disabled> </van-tab>
        <!-- 评论列表 -->

        <!-- 推荐 -->
        <van-tab title="推荐">
          <div>
            <div v-for="(item, index) in comments" :key="index">
              <div>
                <div class="commet_rows">
                  <div>
                    <img
                      :src="item.user.avatarUrl"
                      alt=""
                      style="width: 3rem; border-radius: 1.5rem"
                    />
                  </div>

                  <div class="commet_head">
                    <span style="text-align: left; height: 2rem">
                      <div style="font-size: 0.5rem; color: rgb(89 91 94)">
                        {{ item.user.nickname }}
                      </div>
                      <div style="font-size: 0.1rem; color: #c8c9cc">
                        {{ formatTime(item.time) }}
                      </div>
                    </span>

                    <!-- 点赞 -->
                    <span>
                      <svg
                        t="1668405724155"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        p-id="2714"
                        width="20"
                        height="20"
                      >
                        <path
                          d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
                          p-id="2715"
                          fill="#c8c9cc"
                        ></path>
                      </svg>
                    </span>
                  </div>
                </div>

                <div
                  style="
                    margin: 1rem 5.5rem 2rem 5.5rem;
                    width: 75vw;
                    text-align: left;
                    font-size: 0.8rem;
                  "
                >
                  {{ item.content }}
                  <hr
                    style="
                      margin-top: 1rem;
                      height: 0.1px;
                      border: 0;
                      background: rgb(240, 240, 240);
                    "
                  />
                </div>
              </div>

              <!-- {{ item.content }} -->
            </div>
          </div>
        </van-tab>

        <van-tab title="|" disabled> </van-tab>

        <!-- 热门 -->
        <van-tab title="热门">
          <div>
            <div v-for="(item, index) in hotComments" :key="index">
              <div>
                <div class="commet_rows">
                  <!-- 头像 -->
                  <div>
                    <img
                      :src="item.user.avatarUrl"
                      alt=""
                      style="width: 3rem; border-radius: 1.5rem"
                    />
                  </div>

                  <div class="commet_head">
                    <span style="text-align: left; height: 2rem">
                      <div style="font-size: 0.5rem; color: rgb(89 91 94)">
                        {{ item.user.nickname }}
                      </div>
                      <!-- 时间 -->
                      <div style="font-size: 0.1rem; color: #c8c9cc">
                        {{ formatTime(item.time) }}
                      </div>
                    </span>

                    <!-- 点赞 -->
                    <span>
                      <svg
                        t="1668405724155"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        p-id="2714"
                        width="20"
                        height="20"
                      >
                        <path
                          d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
                          p-id="2715"
                          fill="#c8c9cc"
                        ></path>
                      </svg>
                    </span>
                  </div>
                </div>

                <div
                  style="
                    margin: 1rem 5.5rem 2rem 5.5rem;
                    width: 75vw;
                    text-align: left;
                    font-size: 0.8rem;
                  "
                >
                  {{ item.content }}
                  <hr
                    style="
                      margin-top: 1rem;
                      height: 0.1px;
                      border: 0;
                      background: rgb(240, 240, 240);
                    "
                  />
                </div>
              </div>

              <!-- {{ item.content }} -->
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs } from "vant";
Vue.use(Tab);
Vue.use(Tabs);

export default {
  props: {
    headImgUrl: String,
    tle: String, //传入的歌曲名称
    id: Number,
    singer: String,
  },
  data() {
    return {
      imgUrl: "http://img.daimg.com/uploads/allimg/210114/1-210114151951.jpg",
      title: "",
      singer_name: "",
      active: 0,
      total: "",

      comments: [],
      hotComments: [],
    };
  },
  created() {
    this.title = this.tle;
    this.imgUrl = this.headImgUrl;
    this.singer_name = this.singer;
    this.getCommentData();
  },
  methods: {
    //   /comment/music?id=186016&limit=1   评论API
    getCommentData() {
      this.$request("get", "/comment/music?id=" + this.id + "&limit=20")
        .then((response) => {
          // handle success
          // console.log(this.$store.state.playerState.playData.songId);
          console.log(response);
          this.total = response.total;
          this.hotComments = response.hotComments;
          this.comments = response.comments;

          //异步处理
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    // 时间
    formatTime(val) {
      let t = new Date(val);
      let y = t.getFullYear();
      let m = t.getMonth() + 1;
      let r = t.getDate();
      if (isNaN(m)) {
        m = "00";
        console.log("m" + m);
      }
      if (isNaN(r)) {
        r = "00";
      }
      let minute =
        y + "-" + ("0" + m.toString()).substr(-2) + "-" + ("0" + r.toString()).substr(-2);
      return minute;
    },
    closeWindow() {
      console.log("123");
      this.$destroy();
    },
  },
};
</script>

<style scoped>
/*  头部 标题 收缩  */
.head_title {
  line-height: 2rem;
  display: flex;
  padding: 3vw;
}

/* 歌曲照片  头像 */
.sing_img {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-botton: 1rem;
}
.sing_cover {
  width: 3rem;
  height: 3rem;
  margin-left: 1rem;
  border-radius: 1.5rem;
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sing_cover > img {
  width: 2rem;
  height: 2rem;
  border-radius: 1rem;
}
.cut_off_rule {
  width: 100vw;
  height: 0.5rem;
  border: 0;
  background: rgb(240, 240, 240);
}

/* 评论列表 */

.commet_rows {
  height: 2rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 2rem;
}
.commet_head {
  width: 75vw;
  display: flex;
  justify-content: space-between;
}
</style>
